<template>
  <div class="layout-main">
    <div class="activate-personal no-side-menu">
      <!-- 已激活 -->
      <div class="activated" v-if="activated">
        <a-result status="success" title="个人用户已激活">
          <template #extra>
            <c-button type="primary" @click="affirm">激活企业</c-button>
          </template>
        </a-result>
      </div>
      <!-- 未激活 -->
      <div class="unActivated" v-else>
        <p class="title fs-26 tc">
          个人用户激活
        </p>
        <user
          :userAuthData="userAuthData"
          @success="userSubmitSuccess"
          v-if="userAuthData.userFullName"
        />
      </div>
    </div>
  </div>
</template>

<script>
import user from "@/views/authentication/components/user";
import { getactivateuser } from "@/api/activate";
import { mapState } from "vuex";
import { isLogin } from "@/util/auth";

export default {
  components: {
    user
  },
  data() {
    return {
      activated: false, // 个人用户是否激活
      userAuthData: {}
    };
  },
  computed: {
    ...mapState(["user"])
  },
  methods: {
    //   个人用户激活回调
    userSubmitSuccess() {
      this.activated = true;
      // 超管个人激活后跳转到企业激活，其他角色个人激活后，自行选择是否跳转切换公司列表激活企业
      if (this.$isSuperAdmin()) {
        this.$router.push({
          name: "activateCompany",
          query: { id: this.user.company.id, personal: true }
        });
      }
    },
    // 确认，去到切换公司列表激活公司
    affirm() {
      this.$router.push({ name: "changeCompany" });
    },
    // 查询激活用户的信息
    queryUserActivate() {
      getactivateuser().then(res => {
        this.userAuthData = res;
      });
    }
  },
  mounted() {
    // 刷新或关闭页面时提示
    window.onbeforeunload = function(e) {
      e = e || window.event;
      // 兼容IE8和Firefox 4之前的版本
      if (e) {
        e.returnValue = "确定重新加载/离开此页面？";
      }
      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return "确定重新加载/离开此页面？";
    };
  },
  created() {
    this.queryUserActivate();
  },
  beforeRouteLeave(to, from, next) {
    if (isLogin()) {
      if (this.activated) {
        next();
      } else {
        this.$warning({
          title: "温馨提示",
          content: "请完成个人用户激活！"
        });
      }
    } else {
      next();
    }
  },
  beforeDestroy() {
    // 清除刷新或关闭页面的监听
    window.onbeforeunload = null;
  }
};
</script>

<style lang="scss" scoped>
.unActivated {
  padding: 48px 32px;
  ::v-deep .form_wrapper {
    transform: translateX(-90px);
    width: 450px;
    margin: 0 auto;
  }
}
.activated {
  padding-top: 108px;
}
</style>
